<template>
  <div class="tenant-padding" :class="[`${prefixCls}`]" v-loading="loading">
    <div class="my-tenant">
      <span style="flex: 1">我的企业</span>
      <span class="invited" @click="invitedClick"
        >我的受邀信息<span class="approved-count" v-if="invitedCount > 0">{{ invitedCount }}</span></span
      >
    </div>
    <div class="tenant-list" v-if="dataSource.length > 0">
      <div v-for="item in dataSource" class="tenant-list-item" @click="drownClick(item)">
        <div class="tenant-title">
          <div class="item-left">
            <div class="item-name">{{ item.name }}</div>
            <div class="vip-message">
              <div class="item-house">
                <Copy :value="item.id"> 企业ID </Copy>
              </div>
            </div>
          </div>
          <div class="item-right">
            <span v-if="item.userTenantStatus === '3'">
              <span class="pointer examine">待审核</span>
              <span class="pointer cancel-apply" @click.stop="cancelApplyClick(item.tenantUserId)">取消申请</span>
            </span>
            <span v-else-if="item.userTenantStatus === '4'">
              <span class="pointer examine" @click="joinOrRefuseClick(item.tenantUserId, '1')">加入</span>
              <span class="pointer cancel-apply" @click.stop="joinOrRefuseClick(item.tenantUserId, '5')">拒绝</span>
            </span>
            <div v-else style="width: 75px"></div>
            <span style="margin-left: 24px">
              <Icon v-if="item.show" icon="ant-design:down-outlined" style="font-size: 13px; color: #707070" />
              <Icon v-else icon="ant-design:right-outlined" style="font-size: 13px; color: #707070" />
            </span>
          </div>
        </div>
        <div class="item-content" v-show="item.show">
          <div class="content-box">
            <div class="content-name"> 企业名片 </div>
            <div class="content-desc">
              <div class="flex-flow">
                <div class="content-des-text">姓名</div>
                <div style="font-size: 13px; color: #000000">
                  {{ userDetail.realName }}
                </div>
              </div>
              <div class="flex-flow">
                <div class="content-des-text">部门</div>
                <div style="font-size: 13px">
                  {{ userDetail.orgCodeTxt ? userDetail.orgCodeTxt : "未填写" }}
                </div>
              </div>
              <div class="flex-flow">
                <div class="content-des-text">职业</div>
                <div style="font-size: 13px">
                  {{ userDetail.postText ? userDetail.postText : "未填写" }}
                </div>
              </div>
            </div>
          </div>
          <div class="footer-box">
            <span
              v-if="item.userTenantStatus !== '3'"
              @click.stop="footerClick('editTenant', item)"
              class="font-color333 flex-center margin-right40 font-size13 pointer"
            >
              <Icon icon="i-ant-design:edit-outlined" class="footer-icon" />
              <span>查看租户名片</span>
            </span>
            <span v-else class="font-color9e flex-center margin-right40 font-size13">
              <Icon icon="i-ant-design:edit-outlined" class="footer-icon" />
              <span>查看租户名片</span>
            </span>
            <span
              v-if="item.userTenantStatus !== '3'"
              @click.stop="footerClick('exitTenant', item)"
              class="font-color333 flex-center margin-right40 font-size13 pointer"
            >
              <Icon icon="i-ant-design:export-outlined" class="footer-icon" />
              <span>退出租户</span>
            </span>
            <span v-else class="font-color9e flex-center margin-right40 font-size13">
              <Icon icon="i-ant-design:export-outlined" class="footer-icon" />
              <span>退出租户</span>
            </span>
          </div>
        </div>
      </div>
    </div>
    <a-empty v-else description="暂无数据" style="position: relative; top: 50px" />
  </div>
  <a-modal v-model:open="tenantVisible" width="450px" wrapClassName="edit-tenant-setting">
    <template #title>
      <div style="font-size: 17px; font-weight: 700">查看名片</div>
      <div style="color: #9e9e9e; margin-top: 10px; font-size: 13px"> 名片是您在该组织下的个人信息，只在本组织中展示。 </div>
    </template>
    <div style="margin-top: 24px; font-size: 13px; padding: 0 10px">
      <div class="font-color75">姓名</div>
      <div class="margin-top6 margin-bottom-16">{{ userDetail.realName }}</div>
      <div>部门</div>
      <div class="margin-top6 margin-bottom-16">{{ userDetail.orgCodeTxt ? userDetail.orgCodeTxt : "未填写" }}</div>
      <div>职位</div>
      <div class="margin-top6 margin-bottom-16">{{ userDetail.postText ? userDetail.postText : "未填写" }}</div>
      <div>工作地点</div>
      <div class="margin-top6 margin-bottom-16">{{ userData.workPlace ? userData.workPlace : "未填写" }}</div>
      <div>工号</div>
      <div class="margin-top6 margin-bottom-16">{{ userData.workNo ? userData.workNo : "未填写" }}</div>
    </div>
  </a-modal>

  <!-- 退出租户 -->
  <a-modal v-model:open="cancelVisible" width="500px" destroy-on-close>
    <template #title>
      <div class="cancellation">
        <Icon icon="i-ant-design:warning-outlined" style="font-size: 20px; color: red" />
        退出租户 {{ myTenantInfo.name }}
      </div>
    </template>
    <a-form :model="formCancelState" ref="cancelTenantRef">
      <a-form-item name="tenantName">
        <a-row :span="24" style="padding: 20px 20px 0; font-size: 13px">
          <a-col :span="24"> 请输入租户名称 </a-col>
          <a-col :span="24" style="margin-top: 10px">
            <a-input v-model:value="formCancelState.tenantName" @change="tenantNameChange" />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item name="loginPassword">
        <a-row :span="24" style="padding: 0 20px; font-size: 13px">
          <a-col :span="24"> 请输入您的登录密码 </a-col>
          <a-col :span="24" style="margin-top: 10px">
            <a-input-password v-model:value="formCancelState.loginPassword" />
          </a-col>
        </a-row>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button type="primary" @click="handleOutClick" :disabled="outBtnDisabled">确定</a-button>
      <a-button @click="handleCancelOutClick">取消</a-button>
    </template>
  </a-modal>

  <a-modal title="变更拥有者" v-model:open="owenVisible" width="600px" destroy-on-close :cancelButtonProps="{ display: 'none' }" @ok="changeOwen">
    <div style="padding: 20px">
      <a-row :span="24">
        <div class="change-owen"> 只有变更拥有者之后,才能退出 </div>
      </a-row>
      <a-row :span="24" style="margin-top: 10px">
        <UserSelect v-model:value="tenantOwen" izExcludeMy />
      </a-row>
    </div>
  </a-modal>

  <!-- begin 我的受邀信息 -->
  <a-modal title="我的受邀信息" v-model:open="invitedVisible" :footer="null">
    <a-row :span="24" class="invited-row">
      <a-col :span="16"> 组织 </a-col>
      <a-col :span="8"> 操作 </a-col>
    </a-row>
    <a-row :span="24" class="invited-row-list" v-for="item in invitedList">
      <a-col :span="16">
        {{ item.name }}
      </a-col>
      <a-col :span="8">
        <span class="common" @click="joinOrRefuseClick(item.tenantUserId, '1')">加入</span>
        <span class="common refuse" @click="joinOrRefuseClick(item.tenantUserId, '4')">拒绝</span>
      </a-col>
    </a-row>
    <div style="height: 20px"></div>
  </a-modal>
  <!-- end 我的受邀信息 -->
</template>

<script lang="ts" name="tenant-setting" setup>
  import { onMounted, ref, unref } from "vue"
  import { cancelApplyTenant, changeTenantOwner, agreeOrRefuseJoinTenant } from "../api"
  import { useUserStore } from "/@/store/modules/user"
  import { useMessage } from "/@/hooks/web/useMessage"
  import Copy from "/@/components/My/Copy.vue"
  import Icon from "/@/components/Icon"
  import { Modal } from "ant-design-vue"
  import UserSelect from "/@/components/My/UserSelect/index.vue"
  import { router } from "/@/router"
  import { useDesign } from "/@/hooks/web/useDesign"
  import * as userApi from "/@/api/iam/user"
  import { ErrorCode } from "/@/enums/iamEnum";

  const { prefixCls } = useDesign("j-user-tenant-setting-container")
  //数据源
  const dataSource = ref<any>([])
  const userStore = useUserStore()
  const loading = ref(false)
  //数据源
  const { createMessage } = useMessage()
  //部门字典
  const departOptions = ref<any>([])
  //租户编辑是或否隐藏
  const tenantVisible = ref<boolean>(false)
  //用户数据
  const userData = ref<any>([])
  //用户
  const userDetail = ref({
    workNo: undefined,
    realName: userStore.getUserInfo.realName,
    orgCodeTxt: userStore.getUserInfo.orgCodeTxt,
    postText: userStore.getUserInfo.postText,
  })
  /**
   * 初始化租户数据
   */
  async function initDataSource() {
    setInitedValue()
    loading.value = true
    try {
      //个人设置我的租户查询审核中和正常的a
      const result = await userApi.listTenant()
      //存放正常和审核中的数组
      let normal: any = []
      //存放受邀的信息
      let invited: any = []
      for (let i = 0; i < result.length; i++) {
        let status = result[i].userTenantStatus
        //状态为邀请的放入invited数组中
        if (status === "4") {
          invited.push(result[i])
        }
        normal.push(result[i])
      }
      dataSource.value = normal
      invitedList.value = invited
      invitedCount.value = invited.length
    } finally {
      loading.value = false
    }
  }
  function setInitedValue() {
    dataSource.value = []
    invitedList.value = []
    invitedCount.value = 0
  }

  /**
   * 取消申请
   * @param id
   */
  function cancelApplyClick(id) {
    Modal.confirm({
      title: "取消申请",
      content: "是否取消申请",
      okText: "确认",
      cancelText: "取消",
      onOk: () => {
        cancelApplyTenant({ tenantId: id })
          .then((res) => {
            if (res.success) {
              createMessage.success("取消申请成功")
              initDataSource()
            } else {
              createMessage.warning(res.message)
            }
          })
          .catch((e) => {
            createMessage.warning(e.message)
          })
      },
    })
  }

  /**
   * 展开关闭事件
   */
  function drownClick(value) {
    if (!value.show) {
      value.show = true
    } else {
      value.show = false
    }
  }

  /**
   * 获取部门文本
   * @param value
   */
  function getDepartText(value) {
    let arr = departOptions.value.filter((item) => {
      item.value == value
    })
    if (arr && arr.length > 0) {
      return arr[0].label
    }
    return "未填写"
  }

  /**
   * 底部文本点击事件
   */
  function footerClick(type, item) {
    userData.value = item
    //编辑组织名片
    if (type === "editTenant") {
      tenantVisible.value = true
    } else if (type === "exitTenant") {
      //退出租户
      formCancelState.value = { loginPassword: "", tenantName: "" }
      outBtnDisabled.value = true
      cancelVisible.value = true
      myTenantInfo.value = item
    }
  }

  //退出租户弹窗
  const cancelVisible = ref<boolean>(false)
  //退出租户数据
  const formCancelState = ref<any>({})
  //租户数据
  const myTenantInfo = ref<any>({})
  //注销租户弹窗确定按钮是否可以点击
  const outBtnDisabled = ref<boolean>(true)
  //拥有者
  const tenantOwen = ref<string>("")
  //拥有者弹窗
  const owenVisible = ref<boolean>(false)

  /**
   * 租户名称值改变事件
   */
  function tenantNameChange() {
    let name = unref(myTenantInfo).name
    let tenantName = unref(formCancelState).tenantName
    if (name === tenantName) {
      outBtnDisabled.value = false
    } else {
      outBtnDisabled.value = true
    }
  }

  /**
   * 退出确定点击事件
   */
  async function handleOutClick() {
    if (!unref(formCancelState).loginPassword) {
      createMessage.warning("请输入登录密码")
      return
    }
    console.log("myTenantInfo::::", myTenantInfo)
    await userApi.exitMeTenant({
      tenantId: unref(myTenantInfo).id,
      tenantName: unref(formCancelState).tenantName,
      loginPassword: unref(formCancelState).loginPassword,
    }).then((res) => {
      if (res.success) {
        createMessage.success("成功退出企业")
        cancelVisible.value = false
        initDataSource()
        // userExitChangeLoginTenantId(unref(myTenantInfo).tenantUserId);
      } else {
        if (res.code === ErrorCode.TENANT_USER_EXIT_IS_OWNER) {
          //需要指定变更者
          owenVisible.value = true
          cancelVisible.value = false
          // 名下租户全部退出后，再次登录，提示租户全部冻结。拥有者提示前往注销
        } else if (res.message === "cancelTenant") {
          cancelVisible.value = false
          let fullPath = router.currentRoute.value.fullPath
          Modal.confirm({
            title: "您是该组织的拥有者",
            content: "该组织下没有其他成员，需要您前往注销",
            okText: "前往注销",
            okType: "danger",
            cancelText: "取消",
            onOk: () => {
              if (fullPath === "/iam/userSetting") {
                return
              }
              router.push("/myapps/settings/organization/organMessage/" + unref(myTenantInfo).tenantUserId)
            },
          })
        } else {
          createMessage.warning(res.msg)
        }
      }
    })
  }

  /**
   * 退出租户取消事件
   */
  function handleCancelOutClick() {
    cancelVisible.value = false
    outBtnDisabled.value = true
  }

  /**
   * 变更拥有着
   */
  function changeOwen() {
    if (!unref(tenantOwen)) {
      createMessage.warning("请选择变更拥有者")
      return
    }
    changeTenantOwner({ userId: unref(tenantOwen), tenantId: unref(myTenantInfo).id }).then((res) => {
      if (res.success) {
        createMessage.success("变更成功")
        initDataSource()
        // 登录拥有多个租户身份的用户，退出租户，只剩下一个租户后显示为空---
        // userExitChangeLoginTenantId(unref(myTenantInfo).tenantUserId);
      } else {
        createMessage.warning(res.message)
      }
    })
  }

  //邀请数量
  const invitedCount = ref<number>(0)
  //受邀信息
  const invitedList = ref<any>([])
  //受邀信息弹窗
  const invitedVisible = ref<boolean>(false)

  /**
   * 受邀信息点击事件
   */
  function invitedClick() {
    invitedVisible.value = true
  }

  /**
   * 加入组织点击事件
   */
  async function joinOrRefuseClick(tenantId, status) {
    await agreeOrRefuseJoinTenant({ tenantId: Number.parseInt(tenantId), status: status })
    initDataSource()
  }

  onMounted(() => {
    initDataSource()
  })
</script>

<style lang="less" scoped>
  .tenant-padding {
    padding: 30px 40px 0 20px;
  }
  .my-tenant {
    display: flex;
    font-size: 17px;
    font-weight: 700 !important;
    /*begin 兼容暗夜模式*/
    color: @text-color;
    /*end 兼容暗夜模式*/
    margin-bottom: 20px;
    .invited {
      font-size: 14px;
      text-align: right;
      cursor: pointer;
    }
  }
  .tenant-list {
    box-sizing: border-box;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
  }
  .tenant-list-item {
    border-radius: 5px;
    /*begin 兼容暗夜模式*/
    border: 1px solid @border-color-base;
    /*end 兼容暗夜模式*/
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    overflow: hidden;
    padding: 0 25px;
    width: 100%;
    .item-name {
      align-items: center;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      padding: 14px 0;
      cursor: pointer;
      font-size: 17px;
      /*begin 兼容暗夜模式*/
      color: @text-color;
      /*end 兼容暗夜模式*/
      font-weight: 700 !important;
    }
  }
  .tenant-list-item:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  }
  .pointer {
    cursor: pointer;
  }

  .examine {
    color: #2c9cff;
    font-size: 13px;
  }

  .cancel-apply {
    margin-left: 24px;
    color: red;
    font-size: 13px;
  }

  .item-content {
    transition: ease-in 2s;

    .content-box {
      /*begin 兼容暗夜模式*/
      border-top: 1px solid @border-color-base;
      /*end 兼容暗夜模式*/
      box-sizing: border-box;
      display: flex;
      padding: 24px 0;
    }

    .content-name {
      /*begin 兼容暗夜模式*/
      color: @text-color;
      /*end 兼容暗夜模式*/
      text-align: center;
      width: 100px;
      font-size: 13px;
    }

    .content-desc {
      flex: 1;
      min-width: 0;
    }

    .content-des-text {
      /*begin 兼容暗夜模式*/
      color: @text-color;
      /*end 兼容暗夜模式*/
      text-align: left;
      width: 76px;
      font-size: 13px;
    }
  }

  .flex-flow {
    display: flex;
    min-width: 0;
  }

  .flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
  }

  .footer-box {
    /*begin 兼容暗夜模式*/
    border-top: 1px solid @border-color-base;
    /*end 兼容暗夜模式*/
    box-sizing: border-box;
    display: flex;
    padding: 24px 0;
    color: #757575;
  }

  .margin-right40 {
    margin-right: 40px;
  }

  /*begin 兼容暗夜模式*/
  .font-color333 {
    color: @text-color;
    font-weight: normal;
  }

  .font-color9e {
    color: @text-color;
  }

  .font-color75 {
    color: @text-color;
  }
  /*end 兼容暗夜模式*/

  .font-size13 {
    font-size: 13px;
  }

  .footer-icon {
    font-size: 13px !important;
    margin-right: 13px;
    position: relative;
    top: 0px;
  }
  :deep(.edit-tenant-setting) {
    color: #0a8fe9;
  }
  .margin-top6 {
    margin-top: 6px;
  }
  .margin-bottom-16 {
    margin-bottom: 16px;
  }
  .item-right {
    align-items: center;
    display: flex;
    .buy-margin {
      margin-left: 10px;
      width: 66px;
      border-radius: 20px;
      background: rgba(255, 154, 0, 1);
      height: 28px;
      line-height: 28px;
      cursor: pointer;
      text-align: center;
      span {
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
      }
    }
    .ordinary-user {
      margin-left: 10px;
      width: 66px;
      span {
        font-size: 14px;
        font-weight: 400;
        color: #9e9e9e;
      }
    }
  }
  .tenant-title {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: 24px 0;
    .vip-message {
      display: flex;
      .vip-message-margin {
        margin-right: 20px;
      }
    }
  }
  .change-owen {
    font-size: 14px;
    font-weight: 700;
  }
  //update-begin---author:wangshuai ---date:20230704  for：被邀弹窗样式------------
  .approved-count {
    background: #ffd2d2;
    border-radius: 19px;
    color: red;
    display: inline-block;
    font-weight: 500;
    height: 19px;
    line-height: 18px;
    margin-left: 8px;
    min-width: 19px;
    padding: 0 6px;
    text-align: center;
  }

  .invited-row {
    padding: 10px 34px;
  }
  .invited-row-list {
    padding: 0px 34px;
    .common {
      color: #1e88e5;
      cursor: pointer;
    }
    .refuse {
      color: red;
      margin-left: 20px;
    }
  }
  .pointer {
    cursor: pointer;
  }
  //update-end---author:wangshuai ---date:20230704  for：被邀弹窗样式------------
</style>

<style lang="less">
  // update-begin-author:liusq date:20230625 for: [issues/563]暗色主题部分失效
  @prefix-cls: ~"@{namespace}-j-user-tenant-setting-container";
  /*begin 兼容暗夜模式*/
  .@{prefix-cls} {
    .my-tenant {
      color: @text-color;
    }

    .tenant-list-item {
      border: 1px solid @border-color-base;

      .item-name {
        color: @text-color;
      }
    }

    .item-content {
      .content-box {
        border-top: 1px solid @border-color-base;
      }

      .content-name {
        color: @text-color;
      }

      .content-des-text {
        color: @text-color;
      }
    }
    .footer-box {
      border-top: 1px solid @border-color-base;
    }

    /*begin 兼容暗夜模式*/
    .font-color333 {
      color: @text-color;
    }

    .font-color9e {
      color: @text-color;
    }

    .font-color75 {
      color: @text-color;
    }
  }
  /*end 兼容暗夜模式*/
  // update-end-author:liusq date:20230625 for: [issues/563]暗色主题部分失效
</style>
